<template>
  <div class="article-wrap">
    <common-back :content="headerTitle"></common-back>
    <common-loading v-show="showLoading"></common-loading>
    <div class="content-wrap"
         v-show="!showLoading">
      <div class="title">{{headerTitle}}</div>
      <div class="content"
           v-html="content"></div>
    </div>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonLoading from 'common/loading/loading'
import { mapState } from 'vuex'
export default {
  name: 'detail',
  components: {
    CommonBack,
    CommonLoading
  },
  data () {
    return {
      headerTitle: '',
      content: '',
      showLoading: true
    }
  },
  created () {
    this.getState()
  },
  methods: {
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1 && Number(this.bank) === 1) {
        this.getcontent()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    getcontent () {
      const id = this.$route.params.id
      this.$api.person.useIngDetail({ id })
        .then(this.getcontentSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getcontentSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        this.headerTitle = data.helper.title
        this.content = data.helper.content
      }
    }
  },
  computed: {
    ...mapState(['person', 'contact', 'bank'])
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.article-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  z-index 30
  overflow-y scroll
  padding()
  padding-top 128px
  padding-bottom 20px

  .content-wrap
    width 100%

    .title
      font-size $shop_name
      line-height 72px
      font-weight 400
      color rgba(47, 53, 66, 1)

    .content
      font-size 28px
      line-height 40px
      font-weight 400
      color $agreement_prefix
</style>
